<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>智能售卡系统</title>
  <link rel="stylesheet" href="../../..//public/layui/css/layui.css">
  <script src="../../..//public/layui/layui.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<ul class="layui-nav layui-bg-green" lay-bar="disabled">
  <li class="layui-nav-item"><a href="">
    <img src="https://www.bootcss.com/assets/img/navlogo-small.png" style="margin-right: 10px"/>智能售卡系统</a></li>
  <li class="layui-nav-item"><a href="/index">首页</a></li>
<!--  <li class="layui-nav-item"><a href="/order">订单</a></li>-->
  <li class="layui-nav-item"><a href="/phone">联系</a></li>
  <li class="layui-nav-item"><a href="/about">关于</a></li>
  <div style="float: right;">
    <li class="layui-nav-item" id="login-item"><a href="/login" id="login">登录</a></li>
    <li class="layui-nav-item" id="logout-item"><a href="javascript:void(0);" id="logout">退出</a></li>
  </div>
</ul>
<div style="margin-left: 50px;margin-right: 50px;margin-top: 20px">
  <blockquote class="layui-elem-quote">
    公告：内容来源于服务器
  </blockquote>
</div>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">订单</label>
      <div class="layui-input-inline layui-input-wrap">
        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" placeholder="请输入账号查询" lay-reqtext="请输入账号查询" lay-affix="clear" class="layui-input demo-phone">
      </div>
      <div class="layui-form-mid" style="padding: 0!important;">
        <button type="button" class="layui-btn layui-btn-primary" lay-on="query-order">查询</button>
      </div>
    </div>
  </div>
</form>
<input type="hidden" id="apiUrl" value="<?php echo \common\UrlEnv::getUrl(); ?>">
<input type="hidden" id="wsUrl" value="<?php echo \common\UrlEnv::getWs(); ?>">

<script type="text/html" id="barBtn">
  <a class="layui-btn layui-btn-sm" lay-event="buy">购买</a>
</script>
<script>
  let clickData = {}
  let apiUrl = document.getElementById('apiUrl').value;
  let wsUrl = document.getElementById('wsUrl').value;
  let payNickName = ""
  let ws ={}
  let order_no = ""
  layui.use(['table','form'],function (){
    var table = layui.table;
    let form = layui.form;
    let $ = layui.$;
    // 发起Ajax请求
    $.ajax({
      url: apiUrl+'/index/query_product',
      type: 'POST',
      dataType: 'json',
      success: function(res){
        // allData.push(...res.data)
        // console.log("输出所有的请求结果数据：",allData)
        // 填充表格数据
        table.render({
          elem: '#productTable', // 表格DOM元素的选择器
          data: res.data,   // 请求返回的数据数组
          cols: [[ // 表头
            {field: 'product_name', title: '商品名称'},
            {field: 'product_price', title: '商品价格',templet: function(d){
                return d.product_price ? d.product_price+" 元" : '未知';
              }},
            {field: 'product_des', title: '商品描述'},
            {field: 'product_img', title: '商品图片', templet: '<div><img src="{{d.product_img}}" alt="{{d.product_name}}" style="max-width:100px;" onclick="showImage(\'{{d.product_img}}\', \'{{d.product_name}}\')"></div>'},
            // {field: 'product_out_time', title: '过期时间',templet: function(d){
            //         return d.product_out_time ? d.product_out_time : '无';
            //     }
            // },
            {title: '操作', toolbar: '#barBtn'} // 操作列，使用 toolbar 来渲染按钮
          ]]
        });
        // 监听表格的 tool 事件
        table.on('tool(productTable)', function(obj){
          console.log("输出系统url：",apiUrl)
          let data = obj.data; // 获取当前行数据
          clickData = Object.assign({},data)
          console.log("获取点击行的数据",data)
          console.log("获取点击行的数据赋值后的全局数据：",clickData)
          if(obj.event === 'buy'){ // 如果点击的是购买按钮
            // 这里编写购买商品的逻辑，例如弹出确认框等
            layer.confirm('确定购买该商品吗？', function(index){
              // 这里可以编写购买商品的逻辑，例如发送购买请求等
              layer.close(index);
              // 弹出表单
              layer.open({
                type: 1,
                title: '购买商品',
                area: ['500px', '300px'],
                content: $('#form-container'), // 假设你有一个id为form-container的div包含表单内容
                btn: ['确定', '取消'],
                yes: function(index, layero){
                  var formData = layui.form.val('buy-form');
                  // 判断支付宝昵称和手机号是否为空
                  if (!formData.pay_nickname) {
                    // 如果支付宝昵称或手机号为空，则给出提示
                    layer.msg('支付宝昵称不能为空');
                    return false; // 阻止表单提交
                  }
                  if (!formData.pay_phone){
                    // 如果支付宝昵称或手机号为空，则给出提示
                    layer.msg('联系方式不能为空');
                    return false; // 阻止表单提交
                  }
                  payNickName = formData.pay_nickname
                  // layer.msg('购买成功');
                  layer.close(index);
                  // var loadingIndex = layer.msg('加载中', {icon: 16, shade: 0.3, time: 0});
                  let createOrder = {
                    'product_id':clickData.id,
                    'product_name':clickData.product_name,
                    'pay_phone':formData.pay_phone,
                    'pay_nickname':formData.pay_nickname,
                    'is_pay':0,
                    'pay_price':clickData.product_price,
                  }
                  $.ajax({
                    url: apiUrl+'/index/create_order',
                    data: createOrder,
                    type: 'POST',
                    dataType: 'json',
                    success:function (res) {
                      // layer.close(loadingIndex);
                      console.log("输出订单创建结果：")
                      if (res.code===0){
                        // layer.msg('订单创建成功,请扫码支付')
                        // alert("订单创建成功,请扫码支付\n订单编号:"+res.data)
                        let queryPay = {
                          'order_no':res.data
                        }
                        order_no = res.data
                        $.ajax({
                          url:apiUrl+'/index/to_pay',
                          data: queryPay,
                          type: 'POST',
                          dataType: 'json',
                          success:function (res){
                            console.log("获取支付二维码：",res.data)
                            let imageUrl = apiUrl+res.data.pay_qrcode; // 替换为你的图片地址
                            console.log("删除最终的支付图片结果",imageUrl)
                            document.getElementById("pay_code").src = imageUrl;
                            document.getElementById("order_no").textContent = queryPay.order_no
                            // $('#order_no').text(queryPay.order_no);
                            layer.open({
                              type: 1,
                              title: false, // 不显示标题
                              closeBtn: 1, // 显示关闭按钮
                              area: ['auto', 'auto'], // 根据图片大小自动调整弹出层大小
                              content: $('#pay_div_code'),
                              btn: ['支付完成', '取消'],
                              yes:function (index, layero) {
                                $('#pay_div_code').hide(); // 隐藏 #form-container 区域
                                layer.close(index); // 关闭弹窗
                                connectWs()
                              },
                              btn2: function(index, layero){
                                // 取消按钮的回调函数
                                $('#pay_div_code').hide();
                                layer.close(index); // 关闭弹窗
                              },
                              cancel:function (index,layero) {
                                $('#pay_div_code').hide();
                                layer.close(index); // 关闭弹窗
                              }
                            });
                          },error: function(xhr, status, error){
                            console.error('获取支付码异常:', error);
                            layer.msg('获取支付码异常,请稍后再试')
                            // $('#pay_code').hide()
                          }
                        })
                      }else{
                        layer.msg(res.msg)
                      }
                    },error: function(xhr, status, error){
                      console.error('创建订单失败:', error);
                      layer.msg('订单创建失败,请稍后再试')
                    }
                  })
                  $('#form-container').hide(); // 隐藏 #form-container 区域
                  layui.form.val('buy-form', {
                    'pay_nickname': '', // 将姓名输入框清空
                    'pay_phone': '', // 将姓名输入框清空
                    // 其他表单字段也可以在这里清空
                  });
                },
                btn2: function(index, layero){
                  // 取消按钮的回调函数
                  $('#form-container').hide(); // 隐藏 #form-container 区域
                  layui.form.val('buy-form', {
                    'pay_nickname': '', // 将姓名输入框清空
                    'pay_phone': '', // 将姓名输入框清空
                    // 其他表单字段也可以在这里清空
                  });
                  layer.close(index); // 关闭弹窗
                },
                cancel:function (index,layero){
                  $('#form-container').hide(); // 隐藏 #form-container 区域
                  layui.form.val('buy-form', {
                    'pay_nickname': '', // 将姓名输入框清空
                    'pay_phone': '', // 将姓名输入框清空
                    // 其他表单字段也可以在这里清空
                  });
                  layer.close(index); // 关闭弹窗
                }
              });
            });
          }
        });
      },
      error: function(xhr, status, error){
        console.error('请求失败:', error);
      }
    });
    $(document).ready(function() {
      let username = localStorage.getItem('username');
      let loginItem = $('#login-item');
      let logoutItem = $('#logout-item');
      let loginButton = $('#login');
      let logoutButton = $('#logout');

      if (username) {
        // 用户已登录，显示用户名，隐藏登录按钮，显示退出按钮
        loginButton.text(username);
        loginButton.attr('href', 'javascript:void(0);'); // 禁止跳转登录页面
        logoutItem.show();
        loginItem.show();
      } else {
        // 用户未登录，显示登录按钮，隐藏退出按钮
        loginItem.show();
        logoutItem.hide();
      }

      $('#logout').on('click', function() {
        console.log('点击退出按钮');
        localStorage.removeItem('username');
        localStorage.removeItem('token');
        location.reload(); // 刷新页面以更新按钮显示
      });
    });
  })

  function showImage(imageUrl, imageName) {
    // 弹出层的html内容，显示大图
    var html = '<div><img src="' + imageUrl + '" alt="' + imageName + '" style="max-width:100%; max-height:100%"></div>';

    // 使用layui的弹出层来显示大图
    layer.open({
      type: 1,
      title: false,
      closeBtn: 1,
      area: ['auto', 'auto'],
      content: html
    });
  }
  function connectWs(){
    ws = new WebSocket(wsUrl);
    ws.onopen = function (params) {
      console.log('客户端连接成功')
      // 向服务器发送消息
      let sendMsg = {
        type:'bindNickName',
        payNickName:payNickName,
        data:'connect',
        extra:{
          order_no:order_no,
          product_used_card_no:"11111111"
        }
      }
      ws.send(JSON.stringify(sendMsg))
    };

    // 从服务器接受到信息时的回调函数
    ws.onmessage = function (e) {
      console.log(e)
      let bean = JSON.parse(e.data)
      console.log('收到服务器响应', e.data+"  "+JSON.parse(e.data))
      var message = bean.data;
      if (message === 'connect') {
        layer.msg('服务器连接成功,请等待支付结果,如长时间未返回结果，请联系客服')
        // location.reload();
      }else if (message==='paySuccess'){
        alert('支付成功,请刷新页面')
        // $.ajax({
        //     url:
        // })
      }else if (message==='payFailed'){
        alert('支付失败,请联系客服')
      }
    };
    // 连接关闭后的回调函数
    ws.onclose = function(evt) {
      console.log("关闭客户端连接");
    };
    // 连接失败后的回调函数
    ws.onerror = function (evt) {
      console.log("连接失败了");
    };
  }
</script>
</body>
</html>